<style type="text/css">
    .pageTitle {
        margin: 0 0 6px 0;
        cursor: default;
    }
    ul.messages {
        margin:     0;
        padding:    0;
        list-style: none;
        display:    block;
    }
    ul.messages li {
        display: block;
        list-style: none;
        margin: 0 10px 10px 0 !important;
        padding: 0;
    }
    ul.messages li .span-messages {
        display: block;
        float: none;
        margin: 0;
    }
    ul.messages .dropdown ul li {
        margin:  0;
        padding: 0;
    }
    ul.messages .date {
        font-size: 0.75em;
        cursor: default;
        float: left;
    }
    ul.messages .thumbnail {
        line-height: inherit;
    }
    ul.messages .fog .thumbnail {
          border: 1px dashed #DDD;
          /*background: none !important;*/
    }
    ul.messages .fog .thumbnail:last-child, ul.messages .fog a > h4 {
        color: #A3A3A3;
    }
    ul.messages *[data-type="1"] .thumbnail h4 {
        color: #9D3FCC;
    }
    ul.messages *[data-type="2"] .thumbnail h4  {
        color: #009AF2;
    }
    .scrollExtend-loading {
    }
    #addMessages-cont form *[name=title],
    #addMessages-cont form *[name="to_date"],
    #addMessages-cont form *[name=text] {
        width: 100%;
        margin: 0 0 10px 0;
    }
</style>
<script type="text/javascript" src="./js/jquery.scrollExtend.min.js"></script>
<script type="text/javascript">

    
    var dlg   = $('#addMessages-cont'),
        form  = dlg.children('form');

    Elm.mgs = {};
    Elm.mgs.ws = function(){
        var w = $('<div class="ws"/>').css('white-space', 'nowrap');
        return w.get(0);
    }

    function renderMessage(m) {
        var mes = $('<li class="span12"/>')
                      .addClass('message' + m.id)
                      .data({
                          id:       Number(m.id),
                          to_date:  m.to_date,
                          title:    m.title,
                          text:     m.text,
                          viewable: Number(m.viewable)
                      }).attr({ 'data-type': Number(m.type) });
     
        var dropdown_menu = $('<ul class="dropdown-menu"/>').append(
                  $('<a href="javascript:void(0)" data-direct="hide"><i class="icon-ok"></i> Скрыть</a></li>').wrap('<li />'),
                  $('<a href="javascript:void(0)" data-direct="type"><i class="icon-leaf"></i> Тип</a></li>').wrap('<li />'),
                  $('<a href="javascript:void(0)" data-action="update"><i class="icon-edit"></i> Редактировать</a></li>').wrap('<li />'),
                  $('<a href="javascript:void(0)" data-action="delete"><i class="icon-trash"></i> Удалить</a></li>').wrap('<li />')
        );
        dropdown_menu = $('<div/>').attr({ class: 'dropdown' }).append(
            $('<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"><h4>'+m.title+'<b class="caret"></b></h4></a>'),
            dropdown_menu
        )
     
        if (!mes.data('viewable')) {
            mes.addClass('fog');
            dropdown_menu.find('a[data-direct=hide]').each(function(){
                $(this).html('<i class="icon-remove"></i> Показать');
            });
        }
     
        mes.append(
            $('<div class="span-messages"/>').append(
                $('<div class="thumbnail"/>').append(
                    dropdown_menu,
                    $('<div class="muted date"/>').text(m.to_date)
                ).wrapInner($('<div class="navbar"/><div class="navbar-inner"/><div class="container"/>'))
                .append($('<div/>').text(m.text))
            ),
            Elm.mgs.ws()
        );
        return mes;
    }
    function messagesGridRender(data) {
        var msgs = $('<ul class="row-fluid"/>').addClass('messages')
                        .attr({ 'data-page': Number(data.page) });
        $.each(data.messages, function(i, m){
            msgs.append(renderMessage(m));
        });
        msgs.appendTo(Elm.mgsGrid);
        Elm.mgsGrid.data('numRows', Number(data.numRows));
    }

    function messagesLoad(page) {
        var data = {
            action: '<?php print ACTIONS::MESSAGES_GET; ?>',
            page:   page
        };
        jsonRequest(
            'messages.php', data,
            function(data){
                if(!checkSession(data)) {  Elm.loginFormModal.dialog('open'); return false; }
                Elm.mgsGrid.data( data.response_data );
                messagesGridRender(Elm.mgsGrid.data());
                mgsInit(Elm.mgsGrid);
            },
            function(data){
                console.warn(data.responseText);
            }
        );
    }
    function messagesHide(element){
        var data = {
            action:   '<?php print ACTIONS::MESSAGES_HIDE; ?>',
            id:       element.data('id'),
            viewable: 0
        };
        
        if (element.data('viewable') != 1) data.viewable = 1;

        jsonRequest(
            'messages.php', data,
            function(data){
                if(!checkSession(data)) {  Elm.loginFormModal.dialog('open'); return false; }

                if (data.response_data.viewable == 1) {
                    element.find('a[data-direct=hide]').html('<i class="icon-remove"></i> Скрыть');
                    element.data('viewable', 1);
                    element.removeClass('fog');
                } else {
                    element.find('a[data-direct=hide]').html('<i class="icon-ok"></i> Показать');
                    element.data('viewable', 0);
                    element.addClass('fog');
                }
            },
            function(data){
                console.warn(data.responseText);
            }
        );
    }

    function messagesType(element){
        var data = {
            action:   '<?php print ACTIONS::MESSAGES_TYPE; ?>',
            id:       element.data('id'),
            type:     element.data('type')
        };

        jsonRequest(
            'messages.php', data,
            function(data){
                if(!checkSession(data)) {  Elm.loginFormModal.dialog('open'); return false; }
                element.attr(  'data-type', Number(data.response_data.type)  );
            },
            function(data){
                console.error(data.responseText);
            }
        );
    }

    
    $(document).ready(function(){
        Elm.mgsGrid = $('.mgs_list');
        $('.nav-list .active a').each(function(){
            $('.pageTitle').text($(this).text());
        });
        messagesLoad(1);

    });
    function mgsDirectInit(holder) {
        holder.children(".messages").find('a[data-direct]').each(function(){
            $(this).click(function(e){
                  var element = $(this).parents('li[class*="message"]');
                  switch ($(this).data('direct')) {

                    case 'hide':
                        messagesHide(element);
                        break;

                    case 'type':
                        messagesType(element);
                        break;
                  }
            });
        });
    }
    function mgsInit(holder) {
        mgsDialogInit(holder);
        mgsActionInit(holder);
        mgsDirectInit(holder);
    }
</script>
<script type="text/javascript">
    $(document).ready(function(){
        var str = Elm.mgsGrid.scrollExtend({
            fireOnBeyondElement: false,
            fireOnDocEnd: true,
            beforeStart: function(){
                var lastPageElement = Elm.mgsGrid.children('ul.messages').last(),
                    nextPage = lastPageElement.data('page') + 1;
                    messagesNum = Elm.mgsGrid.find('li[class*=message]').length;
                if (messagesNum == Elm.mgsGrid.data('numRows')) {
                    Elm.mgsGrid.scrollExtend('disable');
                    return;
                }
                messagesLoad(nextPage);
            },
            loadingIndicatorEnabled: true
        });
        str.fireOnBeyondElement = false;
        str.fireOnDocEnd        = true;
    });
</script>
<div>
    <h3 class="pageTitle"  style="float: left">&ensp;</h3>
    <button style="float: right" id="mgs-new" class="btn btn-success" data-action="insert" type="button">
        <i class="icon-plus icon-white"></i> Добавить
    </button>
</div>
<?php echo includeFile( APP_PAGE_PARTS . 'forms/form_add_messages.php', array(), true ); ?>
<div class="mgs_list">&ensp;</div>
